<template>
	<view>
		<view class="features">
			<text class="Title">足不出户</text>
			<view class="list">
				<view class="item" v-for="item in feature" @click="goTo(item.goTo)">
					<tab :img="item.img" :bgColor="item.bgColor"></tab>
					<text class="itemName">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="features">
			<text class="Title">学习小帮手</text>
			<view class="list">
				<view class="item" v-for="item in assistant" @click="goTo(item.goTo)">
					<tab :img="item.img" :bgColor="item.bgColor"></tab>
					<text class="itemName">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="features active">
			<text class="Title">社交倾诉屋</text>
			<view class="list">
				<view class="item" v-for="item in social">
					<tab :img="item.img" :bgColor="item.bgColor"></tab>
					<text class="itemName">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="features">
			<text class="Title">小游戏</text>
			<view class="list">
				<view class="item" v-for="item in game">
					<tab :img="item.img" :bgColor="item.bgColor"></tab>
					<text class="itemName">{{item.name}}</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		feature,
		assistant,
		social,
		game
	} from "@/static/mock.js"
	import tab from "@/components/tab"



	function goTo(val) {
		uni.navigateTo({
			url: val
		})
	}
</script>

<style lang="scss" scoped>
	.features {
		margin: 44rpx 0;
		box-sizing: border-box;
		padding: 0 20rpx;

		.Title {
			display: block;
			font-size: 32rpx;
			font-weight: 600;
			margin: 30rpx 0;
		}

		.list {
			width: 100%;
			box-sizing: border-box;
			display: flex;

			/* 设置网格项之间的间距 */
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 92rpx;
				min-width: 108rpx;

				text {
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	.features.active {
		.list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			/* 设置网格项之间的间距 */
			.item {
				margin-right: 0;
			}
		}
	}
</style>